<!DOCTYPE html>
<html lang="ch-ZN">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>店铺</title>
  <link rel="stylesheet" href="../../lib/css/reset.min.css">
  <link rel="stylesheet" href="../../css/all.min.css">
  <script src="../../lib/js/flexible.js"></script>
</head>

<body>
  <div id="shop_common" class="app-wrap" v-cloak>
    <div class="lay-wrap" v-show="showTuijian">
      <div class="layer"></div>
      <div class="shop-all-tuijian">
        <div class="item" :class="{active: tuijian_type===1}" @click="changeTuijianType(1)">
          推荐排序
          <i></i>
        </div>
        <div class="item" :class="{active: tuijian_type===2}" @click="changeTuijianType(2)">
          新品优先
          <i></i>
        </div>
      </div>
    </div>
    <div class="shop-i-fixed">
      <!-- 店铺信息 -->
      <div class="shop-i-head">
        <div class="top">
          <div class="top-left">
            <div class="icon-back-product"></div>
            <div class="search">
              <i></i>
              <input type="text" placeholder="9.9时尚秒杀日，限量抢">
            </div>
          </div>
          <a href="../product/product_category.html">
            <div class="cate">
              <i class="icon-category-product"></i> 分类
            </div>
          </a>
        </div>
      </div>
      <!-- 分类 -->
      <div class="shop-all-type">
        <a class="item" href="./shop_i.html">
          <p class="txt2">店铺首页</p>
        </a>
        <a class="item" :class="{ active: type_num===1 }" href="./shop_common.html?type=all">
          <p class="txt2">全部商品</p>
        </a>
        <a class="item" :class="{ active: type_num===2 }" href="./shop_common.html?type=cuxiao">
          <p class="txt2">促销</p>
        </a>
        <a class="item" :class="{ active: type_num===3 }" href="./shop_common.html?type=new">
          <p class="txt2">上新</p>
        </a>
      </div>
      <!-- 筛选 -->
      <div v-show="type==='all'" class="shop-all-shaixuan">
        <div class="item" :class="{active: shaixuan_type===1}" @click="toggleTuijian">
          推荐
          <i class="down-arr-red"></i>
        </div>
        <div class="item" :class="{active: shaixuan_type===2}" @click="changeShaixuanType(2)">
          销量
        </div>
        <div class="item" :class="{active: shaixuan_type===3}" @click="changeShaixuanType(3)">
          价格
          <div class="arr-group">
            <i class="up-arr-gray"></i>
            <i class="down-arr-gray"></i>
          </div>
        </div>
        <div class="item" :class="{active: shaixuan_type===4}" @click="changeShaixuanType(4)">
          <i class="gou"></i> 仅看有货
        </div>
      </div>
    </div>
    <!-- 商品主体 -->
    <div class="shop-i-content" :class="[type==='new' ? 'top2' : 'top1' ]">
      <!-- 促销 -->
      <div v-show="type==='cuxiao'" class="shop-all-cuxiao">
        每单满300减30元
      </div>

      <div class="bg-gary">
        <div v-show="type==='cuxiao'" class="shop-cuxiao-time">
          促销时间：2017.12.02-2017.12.25 12:00:00
        </div>
        <div v-show="type==='new'" class="shop-cuxiao-time">
          08.29
        </div>
        <!-- 产品列表 -->
        <div class="bg-gary pd-tb-30 p-30">
          <div class="shop-i-pro-list">
            <div v-for="item2 in pro_list" class="item">
              <a href="">
                <div class="img-box">
                  <img :src="item2.picImg">
                </div>
                <div class="text-box">
                  <p class="title">
                    {{item2.name}}
                  </p>
                  <!--商品 tag -->
                  <p v-if="item2.tag">
                    <span v-show="item2.dingzhi==1" class="tag">定制</span>
                    <span class="tag_new">商场同款</span>
                    <span v-show="item2.rexiao==1" class="tag_new">热销</span>
                    <span v-show="item2.shangxin==1" class="tag_new">上新</span>
                  </p>
                  <p>
                    <span class="sell-price">¥{{item2.showPrice}}</span>
                    <span v-show="type==='cuxiao'||type==='all'" class="ori-price">月销{{item2.salesVolume}}笔</span>
                  </p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../../lib/js/fastclick.js"></script>
  <script src="../../lib/js/vue.js"></script>
  <script src="../../lib/js/axios.min.js"></script>
  <!-- mock 数据 打包发布的时候记得移除 -->
  <script src="../../lib/js/mock.js"></script>
  <script src="../../js/all.min.js"></script>
  <script>
    var type = window.location.href.split('?')[1].split('=')[1];
    shop_common(type);
  </script>
</body>

</html>